<template>
  <div class="mind-account-page">
    <main class="w-m-1080">
      <div class="left-profile-menu">
        <div class="profile">
          <div class="avatar">
            <img :src="profile?.avatar" alt="avatar">
            <el-upload
              class="avatar-uploader"
              :action="UPLOAD_SERVER"
              accept="image/*"
              :multiple="false"
              :show-file-list="false"
              :before-upload="beforeFileUpload"
              :on-success="handleUploadResult"
              :on-error="handleUploadResult"
            >
              <p>更换头像</p>
            </el-upload>
          </div>
          <p class="nickname align-c">{{ profile?.nickname }}</p>
          <p class="email align-c">{{ profile?.email || '暂无邮箱' }}</p>
        </div>
        <div class="statistic-count">
          <div class="statistic">
            <p class="statistic-title align-c">导图数量</p>
            <p class="statistic-value align-c">{{ statisticInfo?.totalCount ?? '--' }}</p>
          </div>
          <div class="statistic">
            <p class="statistic-title align-c">本月新增</p>
            <p class="statistic-value align-c">{{ statisticInfo?.monthAddCount ?? '--' }}</p>
          </div>
          <div class="statistic">
            <p class="statistic-title align-c">已分享数</p>
            <p class="statistic-value align-c">{{ statisticInfo?.shareCount ?? '--' }}</p>
          </div>
        </div>
      </div>
      <div class="content">
        <ul class="link-menu">
          <li v-for="item in ACCOUNT_MENU" :key="item.path">
            <router-link :to="item.path" class="align-c">
              <span>{{ item.subTitle }}</span>
            </router-link>
          </li>
        </ul>
        <div class="router-view">
          <router-view v-slot="{ Component }">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </router-view>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'
import { userStore } from '@/store/user.store'
import { apiUpdateUserAvatar } from '@/apis/auth'
import { apiGetMindStatisticCount } from '@/apis/work'
import { ACCOUNT_MENU, UPLOAD_SERVER } from '@/config/common.config'
import type { MindStatistic } from '@/types'

const userStoreModule = userStore()
const { profile } = storeToRefs(userStoreModule)
userStoreModule.queryUserProfile()

const statisticInfo = ref<MindStatistic>()
/**
 * 用户导图总数/本月新增数/分享数量统计查询
 */
const queryMindStatisticCount = async () => {
  const data = await apiGetMindStatisticCount<MindStatistic>()
  statisticInfo.value = data
}
queryMindStatisticCount()

const beforeFileUpload = (file) => {
  const imageExtensionsRegex = /(\.jpg|\.jpeg|\.png|\.svg)$/i
  const isPic = imageExtensionsRegex.test(file.name)
  if (!isPic) {
    ElMessage.error('只能上传图片')
  }
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    ElMessage.error('上传的图片大小不能超过5M')
  }
  return isPic && isLt5M
}

const handleUploadResult = async (response: any) => {
  if (response.code === '0') {
    const url = response.data
    await apiUpdateUserAvatar(url)
    userStoreModule.queryUserProfile()
    ElMessage.success('头像更新成功')
  } else {
    ElMessage.error(response.message)
  }
}
</script>

<style lang="scss" scoped>
.mind-account-page {
  padding: 30px 0 20px;
  min-height: calc(100vh - 162px);
  .w-m-1080 {
    display: flex;
    align-items: flex-start;
    .left-profile-menu {
      width: 240px;
      position: sticky;
      top: 90px;
      .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .avatar {
        font-size: 0;
        text-align: center;
        position: relative;
        width: fit-content;
        border: 2px solid #f4f4f5;
        border-radius: 50%;
        overflow: hidden;
        img {
          object-fit: cover;
          width: 80px;
          height: 80px;
          display: inline-block;
        }
        &:hover {
          .avatar-uploader {
            display: block;
          }
        }
      }
      :deep(.avatar-uploader) {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.2);
        border-radius: 50%;
        display: none;
        .el-upload {
          width: 100%;
          height: 100%;
          p {
            color: #fff;
            font-size: 13px;
          }
        }
      }
      .nickname {
        font-weight: 600;
        color: #000;
        font-size: 19px;
        margin: 8px 0 6px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      .email {
        color: #999;
        font-size: 14px;
      }
      .statistic-count {
        margin-top: 38px;
        display: flex;
        justify-content: space-between;
        .statistic {
          justify-content: space-between;
          align-items: center;
          &-title {
            color: #71717a;
            font-size: 13px;
            font-family: "GeistSans","GeistSans Fallback";
          }
          &-value {
            font-family: Arvo;
            font-size: 24px;
            color: #333;
            margin-top: 16px;
            position: relative;
            cursor: default;
            &:after {
              content: "";
              width: 10px;
              height: 1px;
              background-color: #cccccc90;
              position: absolute;
              top: -7px;
              left: 50%;
              margin-left: -5px;
            }
          }
        }
      }
    }
    .content {
      flex: 1;
      width: 0;
      margin-left: 60px;
      padding-top: 12px;
      .link-menu {
        background-color: #f4f4f5;
        border-radius: 6px;
        padding: 5px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        li {
          a {
            display: block;
            color: #333;
            line-height: 32px;
            border-radius: 6px;
            font-size: 13px;
            &.router-link-exact-active {
              background-color: #ffffff;
            }
          }
        }
      }
      .router-view {
        margin-top: 12px;
        border-radius: 8px;
        border: 1px solid #e4e4e7;
        padding: 20px;
      }
    }
  }
}
</style>
